{% extends "../public/base.html" %}
{% block mbody %}
<div class="top mr">
    <div class="m-left"><img src="/static/image/cd_icon.png" style="width:80%;margin-top: 10px;" ></div>
    <h1>报修</h1>
    <div class="m-right"></div>
</div>
<div class="mbody mr" id="mbody">
    <form method="post" action="/user/device/add" enctype ="multipart/form-data">
        <div class="center" style="width: 90%;border: #BABABA 1px dotted;margin-top: 20px;">
            <div style="margin:5px;">
                <table style="width: 100%;">
                    <tr>
                        <td>保修地址</td>
                        <td>
                            <div>
                                <select name="" id="drom" class="full" onchange="getroom(this)" >
                                    {% for i in drom %}
                                        <option value="/user/device/getroom?dorm={{ i.get('Fid') }}"  >{{ i.get('Fdorm_name', '') }}</option>
                                    {% end %}
                                </select>
                            </div>
                    </tr>
                    <tr>
                        <td></td>
                        <td>
                            <div>
                                <select name="" id="room" class="full" onchange="getdevice(this)">
                                    <option></option>
                                    {% for i in room %}
                                        <option value="/user/device/getdevice?room={{ i.get('Fid') }}&dorm={{ drom[0]['Fid'] }}" >{{ i.get('Fname', '') }}</option>
                                    {% end %}
                                </select>
                            </div>
                    </tr>
                    <tr>
                        <td style="width: 70px">保修类型</td>
                        <td style="width:170px;">
                            <select name="id" id="device" class="full">
                                    <option></option>
                            </select>
                        </td>
                        <td rowspan="4" >
                            <div id="preview">
                                <img id="imghead" src="" class="full" alt="">
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>联系手机</td>
                        <td>
                            <select name="tel" id="" class="full">
                                <option value="{{ user['user'].get('Ftel') }}">{{ user['user'].get('Ftel') }}</option>
                            </select>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="form center" style="width: 90%;margin-top: 20px;">
            <div class="full title">描述：</div>
            <div class="full"><textarea class="full" name="Fremark"></textarea></div>
            <div class="full title">上传：</div>
            <div class="full">
                <p class="btn_addPic" ><span><em>+</em>添加图片</span><input type="file" name="Fimg" onchange="previewImage(this)" ></p>
            </div>
            <input type="submit" class="btn" value="确认报修">
        </div>
    </form>
    {# <div class="item">
        <div class="i-title">
            <div class="i-title-item">菜单1</div>
            <div class="i-title-item">菜单2</div>
            <div class="i-title-item">菜单3</div>
        </div>
        {% for i in data %}
            <a href="/user/device/add?id={{ i.get('Fid', '') }}">
                <div class="i-ul">
                    <div class="i-ul-img left"><img src="/static{{ i.get('Fimg', '') }}"></div>
                    <div class="i-ul-body left">
                        <div class="i-ul-title">{{ i.get('Fname', '') }}</div>
                        <div class="i-ul-text">{{ i.get('Fremark', '') }}</div>
                    </div>
                    <div class="right-text">
                        点击报修>>
                    </div>
                </div>
            </a>
        {% end %}
        <div class='after' page="{{ total }}">加载中......</div>
    </div> #}
</div>
<!-- <div class="bottom mr">
    
</div> -->
<div class="palert" id="aAlert"><img src="/static/image/loading.gif">加载中……</div>
{% end %}
{% block script %}
<script type="text/javascript">
function getroom(t){
    palert.open("#aAlert");
    mthis = $(this);
    $.get($(t).val(), function(data, status, xhr){ 
        $('#room').html("<option></option>"+data)
        palert.close("#aAlert");
    });
}
function getdevice(t){
    palert.open("#aAlert");
    mthis = $(this);
    $.get($(t).val(), function(data, status, xhr){ 
        $('#device').html("<option></option>"+data)
        palert.close("#aAlert");
    });
}
        //图片上传预览    IE是用了滤镜。
        function previewImage(file)
        {
          var MAXWIDTH  = 260; 
          var MAXHEIGHT = 180;
          var div = document.getElementById('preview');
          if (file.files && file.files[0])
          {
              div.innerHTML ='<img id=imghead>';
              var img = document.getElementById('imghead');
              img.onload = function(){
                var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
                img.style.width = '100%'
                // img.width  =  rect.width;
                // img.height =  rect.height;
//                 img.style.marginLeft = rect.left+'px';
                img.style.marginTop = rect.top+'px';
              }
              var reader = new FileReader();
              reader.onload = function(evt){img.src = evt.target.result;}
              reader.readAsDataURL(file.files[0]);
          }
          else //兼容IE
          {
            var sFilter='filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src="';
            file.select();
            var src = document.selection.createRange().text;
            div.innerHTML = '<img id=imghead>';
            var img = document.getElementById('imghead');
            img.filters.item('DXImageTransform.Microsoft.AlphaImageLoader').src = src;
            var rect = clacImgZoomParam(MAXWIDTH, MAXHEIGHT, img.offsetWidth, img.offsetHeight);
            status =('rect:'+rect.top+','+rect.left+','+rect.width+','+rect.height);
            div.innerHTML = "<div id=divhead style='width:"+rect.width+"px;height:"+rect.height+"px;margin-top:"+rect.top+"px;"+sFilter+src+"\"'></div>";
          }
        }
        function clacImgZoomParam( maxWidth, maxHeight, width, height ){
            var param = {top:0, left:0, width:width, height:height};
            if( width>maxWidth || height>maxHeight )
            {
                rateWidth = width / maxWidth;
                rateHeight = height / maxHeight;
                 
                if( rateWidth > rateHeight )
                {
                    param.width =  maxWidth;
                    param.height = Math.round(height / rateWidth);
                }else
                {
                    param.width = Math.round(width / rateHeight);
                    param.height = maxHeight;
                }
            }
             
            param.left = Math.round((maxWidth - param.width) / 2);
            param.top = Math.round((maxHeight - param.height) / 2);
            return param;
        }
$(document).ready(function(){
    ScrollItem.bind("/user/device/list?page=")
})
</script>
{% end %}